<script setup>
import {onMounted, ref} from "vue";
import router from "@/router/routeIndex.js";
import {getSystemMenu} from "@/api/commonService.js";


const handleOpen = (key, keyPath) => {
    router.push(key)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}

let systemNavigation = ref([])

const sysNavRequest = async () => {
    const response = await getSystemMenu()
    systemNavigation.value = response.data
}

onMounted(() => {
    sysNavRequest()
})

</script>

<template>
    <div class="logoContent"><img src="" alt="系统LOGO"></div>
    <el-row class="tac">
        <el-col :span="12">
            <el-menu default-active="2" class="el-menu-left" @open="handleOpen" @close="handleClose" router>
                <el-sub-menu v-for="item in systemNavigation" :key="item.id":index="item.routePath">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"/>
                        </el-icon>
                        <span>{{ item.menuName }}</span>
                    </template>
                    <el-menu-item v-for="children in item.children" :key="children.id" :index="children.routePath">
                        {{ children.menuName }}
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<style scoped lang="scss">
.logoContent {
    background-color: rgb(140, 210, 180);
    height: 60px;
}

.el-menu-left {
    width: 200px;
    overflow-y: auto;
    height: $left-menu-height;
}
</style>
